<template>
  <div>
    <ul class="collapse" >
      <li v-for="(item,index) in data" :key="index">
        <div class="collapseName">
          <div @click="changeItem(index)">
            <van-icon :name="item.isOpen?'arrow-down':'arrow-up'" />
            <span style="margin-left: 20rpx">{{item.simplename}}</span>
          </div>
          <p >
            <van-icon name="more-o" size="20" @click.stop="getMore(item,index)"/>
           <!-- <van-action-sheet
           :show="item.isShow"
           :actions="actions"
           :description="description"
            @select="onSelect"
           @close="onClose(index)"
            /> -->

            </p>
        </div>
        <template v-if="item.childList.length">
          <collapseBox1 :data="item.childList" :className="item.isOpen" ></collapseBox1>

        </template>


      </li>

    </ul>
      <modelBox ref="modelBox" ></modelBox>
      <van-dialog id="van-dialog" />
  </div>

</template>

<script>
  import collapseBox1 from "./collapseBox1"
  import Dialog from '../../static/vant-weapp/dist/dialog/dialog';
  import modelBox from './modelBox'
  export default {
    name: 'collapseBox',
    props: ['data'],
    data () {
      return {
        show:false,
        description:"",
        actions:[
           { name: '编辑', color: '#07c160' },
                { name: '添加', color: '#1989fa' },
                { name: '删除', color: '#ee0a24' },
                { name: '详情', color: '#1989fa' },
        ],
        iconName: 'arrow-up',
        dataList:[]
      }
    },

    onLoad(){

    },
    onShow(){

    },
    mounted() {
       this.dataList=this.data;
       console.log(this.data)
    },
    components:{
      collapseBox1,
      modelBox
    },
    methods: {

      onSelect(val){
       if(val.target.name=='详情'){
         wx.navigateTo({ url: '/pages/createProductDetail/main' })
       }
      },

      onClose(index){
         this.data[index].isShow=false;
          this.$set(this.data,this.data[index].isShow,false)
      },
    getMore(item,index){
      let that=this;
      wx.showActionSheet({
        itemList: ['添加', '编辑', '删除','详情'],
        success (res) {
          console.log(res.tapIndex)
          if(res.tapIndex==0){
             that.$refs.modelBox.init(item.id)
          }else if(res.tapIndex==1){

          }else if(res.tapIndex==2){
            
          }else if(res.tapIndex==3){

          }


        },
        fail (res) {
          console.log(res.errMsg)
        }
      })
      // this.description="所选类型"+item.simplename
      // this.data[index].isShow=true;
      // this.$set(this.data,this.data[index].isShow,true)
      // this.show=true;
    },

      changeItem (index) {
        if (this.data[index].isOpen) {

          this.data[index].isOpen=false;
          // this.$set(this.data,this.data[index].isOpen,false)
        } else  {

          this.data[index].isOpen=true;
          // this.$set(this.data,this.data[index].isOpen,true)
        }
        // this.$nextTick(() => {
        //    this.$refs.collapseBox1.init( this.data[index].isOpen)
        // })

         // console.log(this.data[index].isOpen)
        //console.log(this.data[index].isOpen)
      }
    }
  }
</script>

<style scoped>
  .collapse{
    width: 100%;
    background: #fff;
    font-size: 32rpx;
    list-style-type: none;
    transition: all 0.2s;
  }
  .collapse.active{
    height: 0;
    transition: all 0.2s;
    overflow: hidden;
  }
  .collapse>li{
    width: 100%;
    padding:25rpx 0 25rpx 50rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

  }
  .collapseName>p{
    width:70%;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 5%;
  }
  .collapseName>div{
    width: 30%;
  }
  .collapseName{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
